<!DOCTYPE html>
<html>

<body>
    <video autoplay controls id="video-local"></video>

    <script src="//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script>
        function getUserMedia(constrains, success, error) {
            let promise;
            if (navigator.mediaDevices.getUserMedia) {
                //最新标准API
                promise = navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
            } else if (navigator.webkitGetUserMedia) {
                //webkit内核浏览器
                promise = navigator.webkitGetUserMedia(constrains).then(success).catch(error);
            } else if (navigator.mozGetUserMedia) {
                //FireFox浏览器
                promise = navigator.mozGetUserMedia(constrains).then(success).catch(error);
            } else if (navigator.getUserMedia) {
                //旧版API
                promise = navigator.getUserMedia(constrains).then(success).catch(error);
            }
            return promise;
        }

        //封装判断摄像头是否能使用的函数 当这四个函数全为空时,那么我们无法打开用户摄像头
        function canGetUserMediaUse() {
            return !!(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
        }

        const localVideoElm = document.getElementById('video-local');
        $(document).ready(function () {
            if (canGetUserMediaUse()) {
                getUserMedia({
                    //图像
                    video: true,
                    //音频
                    audio: true
                }, (stream) => {
                    localVideoElm.srcObject = stream;
                    $(localVideoElm).width(800);
                }, (err) => {
                    console.log("访问用户设备失败", err.name, err.message);
                })
            } else {
                alert("您的浏览器不兼容，建议更新最新的chrome");
            }

        });
    </script>
</body>

</html>